<template>
  <section>
    <el-form label-width="80px" inline style="border: 0px solid red">
      <el-form-item label="" style="border: 0px solid red;">
        <el-row style="display: flex;flex-direction: row;width: 100%">
          <filter-tool class="filtertool" type="goodsTypeId" test="name" v-on:confirm="filterEvent"></filter-tool>
          <filter-tool class="filtertool" type="state" test="name" v-on:confirm="filterEvent"></filter-tool>
        </el-row>
      </el-form-item>
      <el-form-item label="" style="border: 0px solid red;">
        <search-tool v-on:search="searchProductEvent"></search-tool>
      </el-form-item>
      <el-form-item label="" style="border: 0px solid red;float: right">
        <el-button size="mini" @click="addMallGoodsBtn" type="primary" icon="el-icon-plus"/>
      </el-form-item>
    </el-form>
    <el-table :data="mallGoodsList" stripe v-loading="loading" v-if="mallGoodsList" @selection-change="handleSelectionChange">
      <el-table-column type="selection" width="55"/>
      <el-table-column type="index" label="序号"  width="80px"></el-table-column>
      <el-table-column label="名称" prop="title"/>
      <el-table-column label="商品类型" prop="goodsType.name"/>
      <el-table-column label="状态" width="300px">
        <template slot-scope="scope">
          <span v-if="scope.row.state === 0">未操作</span>
          <span v-else-if="scope.row.state === 1" style="color:green">已上架</span>
          <span v-else-if="scope.row.state === 2" style="color:red">已下架</span>
        </template>
      </el-table-column>
      <el-table-column label="操作" width="180" fixed="right">
        <template slot-scope="scope">
          <el-button type="primary" @click='confirm(scope.row)' size="mini">编辑</el-button>
          <el-button @click='delGoodsBtn(scope)' size="mini" type="danger">删除</el-button>
        </template>
      </el-table-column>
    </el-table>
    <el-row>
      <batch-tool :titleList="titleList" v-on:operateEvent="operateEvent"></batch-tool>
    </el-row>
    <el-pagination v-show="totalPage>0" style="margin-top:10px;" small
                   layout="prev, pager, next"
                   :page-count="totalPage"
                   @current-change="goPage">
    </el-pagination>
    <el-dialog :title="currGoods.id?'编辑':'新建'" :visible.sync="editMallGoodsDialog" width="80%" v-if="currGoods"
               :before-close="beforeEvent" append-to-body>
      <new-mall-goods :mallGoods="currGoods" v-on:confirm="confirmEditDialogBtn"></new-mall-goods>
    </el-dialog>
    <el-row class="progressBox" v-if="listLength >0">
      <el-progress class="progress" type="circle" :percentage="(listLength-selGoodsList.length)/listLength *100"/>
      <el-row>操作中……</el-row>
    </el-row>
  </section>
</template>

<script>
  import inbound from './inbound'
  import batchTool from '@/common/batchTool'
  import filterTool from '@/common/filterTool'
  import searchTool from '@/common/searchTool'
  import newMallGoods from './newMallGoods'
  import {mapGetters, mapActions, mapMutations} from 'vuex'
  import Vue from 'vue'//后续添加属性，需要vue联动
  import errHandler from '@/assets/errHandler'
  export default {
    name: "mallGoodsList",
    components:{inbound,batchTool,newMallGoods,filterTool,searchTool},
    data() {
      return {
        mallGoodsList:null,
        totalPage:0,
        loading:false,
        currGoods:null,
        goodsTypeList:null,
        editMallGoodsDialog:false,
        loadMallGoodsDialog:false,
        filterObj:{},
        titleList:['上架','下架'],
        selGoodsList:null,
        listLength:0,
        inboundList:null
      }
    },
    mounted () {
    },
    created(){
      this.getGoodsTypeList()
      this.getMallGoodsList()
    },
    computed:{
      ...mapGetters(['department']),
    },
    watch: {
    },
    methods: {
      ...mapActions({
        fetch: 'fetch'
      }),
      handleSelectionChange(e){
        console.log('多选事件----',e)
        this.selGoodsList=[]
        e.forEach(g=>{
          this.selGoodsList.push(g.id)
        })
      },
      operateEvent(e){
        if(this.selGoodsList === null ||this.selGoodsList.length <=0){
          this.$message({type:'error',message:'请至少选择一个商品！'})
          return
        }
        //批量操作中。。。
        this.listLength=this.selGoodsList.length
        console.log('this.selGoodsList',this.selGoodsList)
        if(e === 0){
          this.updateMallGoods(this.selGoodsList,1)
        }else if(e === 1){
          this.updateMallGoods(this.selGoodsList,2)
        }
      },
      updateMallGoods(array,state){
        this.fetch({name:"updateMallGoods",data:{id:array[0],state}})
          .then(res=>{
            array.splice(0,1)
            console.log('看看list会不会变化。。。。',this.selGoodsList)
            if(array.length>0){
              this.updateMallGoods(array,state)
            }else {
              console.log('批量操作完成-----',this.listLength,this.selGoodsList.length)
              this.getMallGoodsList()
              setTimeout(()=>{this.listLength=0},1500)
            }
          })
          .catch(err=>{
            console.log(err)
            errHandler.handle(this,err)
          })
      },
      filterEvent(e){
        console.log('筛选条来的----',e)
        for(let key in e){
          this.filterObj[key]=e[key]
        }
        let tmp={}
        for(let k in this.filterObj){
          if(this.filterObj[k]){
            tmp[k]=this.filterObj[k]
          }
        }
        this.getMallGoodsList(0,tmp)//加载公司下产品列表
      },
      searchProductEvent(e){
        this.filterObj.key=e
        console.log('搜索条来的----',e,this.filterObj)
        this.getMallGoodsList(0,this.filterObj)//加载公司下产品列表
      },
      beforeEvent(e){
        this.getMallGoodsList()
        this.currGoods=null
      },
      goPage(val){
        this.getMallGoodsList(val-1)
      },
      getGoodsTypeList(){
        this.fetch({name:"getMallGoodsTypeList",data:{storeId:this.department.id}})
          .then(res=>{
            this.goodsTypeList=res
            console.log(res)
          })
          .catch(err=>{
            console.log(err)
            errHandler.handle(this,err)
          })
      },
      getMallGoodsList(pageNo,filterObj){
        console.log('请求前-------',filterObj)
        this.fetch({name:"getMallGoodsList",data:{page:pageNo?pageNo:0,storeId:this.department.id,...filterObj}})
          .then(res=>{
            console.log(res)
            this.mallGoodsList=res.content
            this.totalPage=res.totalPages
            this.editMallGoodsDialog=false
          })
          .catch(err=>{
            console.log(err)
            errHandler.handle(this,err)
          })
      },
      delGoodsBtn(scope){
        this.loading=true
        this.$confirm('确认删除？')
          .then(()=> {
            this.fetch({name:"delMallGoods",data:{id:scope.row.id}})
              .then(res=>{
                this.loading=false
                this.getMallGoodsList()
              })
              .catch(err=>{
                console.log(err)
                errHandler.handle(this,err)
              })
          })
          .catch(() => {
            this.$message({
              type: 'info',
              message: '已取消删除'
            })
            this.loading = false
          })
      },//删除商品
      addMallGoodsBtn(){
        this.currGoods={data:{props:null},departmentId:this.department.id,title:'',goodsSkus:[],sale:1,joinSale:false,joinCoupon:false}
        this.editMallGoodsDialog=true
      },//新建商品
      loadMallGoodsBtn(row){
        // this.editMallGoodsDialog=false
        this.loadMallGoodsDialog=true
      },//导入商品
      confirm(row){
        console.log('当前商品---------',row)
        this.currGoods=row
        this.editMallGoodsDialog=true
      },
      confirmEditDialogBtn(data){
        if(data.id){
          //更新
          this.updateMallGoods(data)
        }else {
          //新建
          this.createMallGoods(data)
        }
      },
      confirmGodownEntryBtn(data){
        console.log('dialog里传来参数——————————',data)
        this.createGodownEntry(data)
      },
      selLoadEvent(e){
        console.log('导入page选中导入了----',e)
        console.log('看一下当前goods',this.currGoods)
        let psList=[]
        e.productSpecs.forEach(ps=>{
          let tmp={
            price:ps.price,sn:ps.sn,props:ps.props,edit:true
          }
          this.currGoods.goodsSkus.push(tmp)
        })
        // return
        this.currGoods={...this.currGoods}
        this.loadMallGoodsDialog=false
        this.editMallGoodsDialog=true
        console.log('currgoods----',this.currGoods)
      }
    }
  }
</script>

<style scoped>
  .filtertool{
    margin: 0 5px;
    width: 110px;
    border:0px solid red;
  }
  .progressBox{
    width: 100%;
    height: 100%;
    position: fixed;
    top:0px;
    left: 0px;
    display: flex;
    flex-direction: column;
    align-items: center;
    /*justify-items: center;*/
    justify-content: center;
    z-index: 100;
    background-color: rgba(255,255,255,0.6);
  }
  .progress{
    position:relative;
    z-index: 1001;
    text-align: center;
  }
</style>
